

<template>
  <div id="app">
    <!-- 查询输入框 -->
    <el-input v-model="queryParams.pointNameLike" placeholder="输入点名进行模糊查询"></el-input>
    <el-button type="primary" @click="fetchControlPoints">查询</el-button>
    <el-button type="primary" @click="openAddDialog">添加控制点</el-button>
    <el-table :data="controlPoints" stripe>
      <el-table-column prop="id" label="ID"></el-table-column>
      <el-table-column prop="pointName" label="点名"></el-table-column>
      <el-table-column prop="coordinateX" label="坐标X"></el-table-column>
      <el-table-column prop="coordinateY" label="坐标Y"></el-table-column>
      <el-table-column prop="elevationH" label="高程H"></el-table-column>
      <el-table-column prop="description" label="描述"></el-table-column>
      <el-table-column label="操作">
        <template #default="scope">
          <el-button type="primary" size="small" @click="openEditDialog(scope.row)">编辑</el-button>
          <el-button type="danger" size="small" @click="deleteControlPoint(scope.row.id)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页组件 -->
    <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="queryParams.current"
        :page-sizes="[10, 20, 30]"
        :page-size="queryParams.size"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total">
    </el-pagination>

    <el-dialog :visible.sync="addDialogVisible" title="添加控制点">
      <template #content>
        <el-form :model="newControlPoint" ref="addFormRef">
          <el-form-item label="点名" prop="pointName">
            <el-input v-model="newControlPoint.pointName"></el-input>
          </el-form-item>
          <el-form-item label="坐标X" prop="coordinateX">
            <el-input v-model="newControlPoint.coordinateX"></el-input>
          </el-form-item>
          <el-form-item label="坐标Y" prop="coordinateY">
            <el-input v-model="newControlPoint.coordinateY"></el-input>
          </el-form-item>
          <el-form-item label="高程H" prop="elevationH">
            <el-input v-model="newControlPoint.elevationH"></el-input>
          </el-form-item>
          <el-form-item label="描述" prop="description">
            <el-input v-model="newControlPoint.description"></el-input>
          </el-form-item>
        </el-form>
      </template>
      <template #footer>
        <el-button @click="addDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="addControlPoint">确定</el-button>
      </template>
    </el-dialog>

    <el-dialog :visible.sync="editDialogVisible" title="编辑控制点">
      <template #content>
        <el-form :model="editControlPoint" ref="editFormRef">
          <el-form-item label="点名" prop="pointName">
            <el-input v-model="editControlPoint.pointName"></el-input>
          </el-form-item>
          <el-form-item label="坐标X" prop="coordinateX">
            <el-input v-model="editControlPoint.coordinateX"></el-input>
          </el-form-item>
          <el-form-item label="坐标Y" prop="coordinateY">
            <el-input v-model="editControlPoint.coordinateY"></el-input>
          </el-form-item>
          <el-form-item label="高程H" prop="elevationH">
            <el-input v-model="editControlPoint.elevationH"></el-input>
          </el-form-item>
          <el-form-item label="描述" prop="description">
            <el-input v-model="editControlPoint.description"></el-input>
          </el-form-item>
        </el-form>
      </template>
      <template #footer>
        <el-button @click="editDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="updateControlPoint">确定</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue';
import { ElMessage } from 'element-plus';

const controlPoints = ref([]);
const addDialogVisible = ref(false);
const editDialogVisible = ref(false);
const newControlPoint = reactive({
  pointName: '',
  coordinateX: '',
  coordinateY: '',
  elevationH: '',
  description: ''
});
const editControlPoint = reactive({
  id: null,
  pointName: '',
  coordinateX: '',
  coordinateY: '',
  elevationH: '',
  description: ''
});
const addFormRef = ref(null);
const editFormRef = ref(null);
// 查询参数
const queryParams = reactive({
  current: 1,
  size: 10,
  pointNameLike: ''
});
// 总记录数
const total = ref(0);

const fetchControlPoints = async () => {
  try {
    const response = await fetch(`/controlPoints/page?current=${queryParams.current}&size=${queryParams.size}&pointNameLike=${queryParams.pointNameLike}`);
    const result = await response.json();
    controlPoints.value = result.records;
    total.value = result.total;
  } catch (error) {
    ElMessage.error('获取控制点数据失败');
  }
};

const openAddDialog = () => {
  addDialogVisible.value = true;
};

const addControlPoint = async () => {
  try {
    const response = await fetch('/controlPoints', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json'
      },
      body: JSON.stringify(newControlPoint)
    });
    if (response.ok) {
      ElMessage.success('添加成功');
      addDialogVisible.value = false;
      // 清空表单数据
      Object.keys(newControlPoint).forEach(key => newControlPoint[key] = '');
      fetchControlPoints();
    } else {
      ElMessage.error('添加失败');
    }
  } catch (error) {
    ElMessage.error('添加失败');
  }
};

const openEditDialog = (row) => {
  Object.assign(editControlPoint, row);
  editDialogVisible.value = true;
};

const updateControlPoint = async () => {
  try {
    const response = await fetch(`/controlPoints/${editControlPoint.id}`, {
      method: 'PUT',
      headers: {
        'Content-Type': 'application/json'
      },
      body: JSON.stringify(editControlPoint)
    });
    if (response.ok) {
      ElMessage.success('更新成功');
      editDialogVisible.value = false;
      fetchControlPoints();
    } else {
      ElMessage.error('更新失败');
    }
  } catch (error) {
    ElMessage.error('更新失败');
  }
};

const deleteControlPoint = async (id) => {
  try {
    const response = await fetch(`/controlPoints/${id}`, {
      method: 'DELETE'
    });
    if (response.ok) {
      ElMessage.success('删除成功');
      fetchControlPoints();
    } else {
      ElMessage.error('删除失败');
    }
  } catch (error) {
    ElMessage.error('删除失败');
  }
};

// 处理每页显示记录数变化
const handleSizeChange = (newSize) => {
  queryParams.size = newSize;
  fetchControlPoints();
};

// 处理当前页码变化
const handleCurrentChange = (newPage) => {
  queryParams.current = newPage;
  fetchControlPoints();
};

onMounted(() => {
  fetchControlPoints();
});
</script>

<style scoped>
/* 可以在这里添加自定义样式 */
</style>